<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/11
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/myajax.js"></script>
</head>
<body>
    <div id="app">
        <form action="" @submit.prevent="handleSubmit">
            用户名: <input type="text" name="" id="" v-model="username"> <span>{{msg}}</span> <br>
            <input type="submit" value="校验">
        </form>
    </div>

    <script>



        const vm = new Vue({
            el:"#app",
            data:{
                username:"",
                msg:""
            },
            methods:{
                handleSubmit(){
                    //发起ajax异步请求
                    let url = "${pageContext.request.contextPath}/asynchronousCheckUsername";
                    let data = "username="+this.username;
                    let type= "post";
                    let _this =this;
                    function success(result){
                        _this.msg = result;
                    }

                    myAjax(url,data,type,success);


                    //1 创建xhr对象
                   /* var xhr;

                    try
                    {
                        // Firefox, Opera 8.0+, Safari
                        xhr=new XMLHttpRequest();
                    }
                    catch (e)
                    {

                        // Internet Explorer
                        try
                        {
                            xhr=new ActiveXObject("Msxml2.XMLHTTP");
                        }
                        catch (e)
                        {

                            try
                            {
                                xhr=new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            catch (e)
                            {
                                alert("您的浏览器不支持AJAX！");
                                return false;
                            }
                        }
                    }

                    //2 发起请求
                    xhr.open("post", "${pageContext.request.contextPath}/asynchronousCheckUsername");
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.send("username=" + this.username);

                    let _this = this;
                    //3 监听响应
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4){
                            if(xhr.status == 200){
                                //alert(xhr.responseText);
                                _this.msg = xhr.responseText;
                            }else{
                                console.log(xhr.responseText);
                            }
                        }
                    }*/
                    
                }
            }
        })
    </script>
</body>
</html>
